<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit"/>
		<meta name="force-rendering" content="webkit"/>
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
		<title>Summary</title>
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=no">
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link rel="stylesheet" type="text/css" href="css/responsive.css"/>
	</head>
	<body>
		<div class="main">
			<div class="summary-box">
				<div class="hd">
					<h3>Summary</h3>
					<div class="btns g-button-wrap">
						<button class="colse-button g-button-style" type="button">Close</button>
					</div>
				</div>
				<div class="bd">
					<div class="information item">
						<div class="title g-title">
							<h3>Basic Information</h3>
						</div>
						<div class="content">
							<div class="stetup-photos">
								<form id="uploadForm" action="">
									<div class="photos-wrap">
										<div class="img">
											<img src="images/img_01.png" alt="">
										</div>
									</div>
									<div class="optional">
										<div class="tit">Setup Photos (Optional)</div>
									</div>
									<div class="photos-list ">
										<div class="file">
											<input type="file" name="file" accept="image/*" id="upload" multiple="">
											<div class="desc">
												<div class="box">
													<p class="t1">Drag and drop images here</p>
													<p class="t2">- or -</p>
													<p class="t3">Browse files from your computer</p>
												</div>
											</div>
										</div>
										<div class="content-img scrollBox">
											<ul class="content-img-list ">
												<li>
													<div class="img">
														<img src="images/img_02.png" alt="">
													</div>
												</li>
												<li>
													<div class="img">
														<img src="images/img_03.png" alt="">
													</div>
												</li>
											</ul>
										</div>
									</div>
								</form>
							</div>
							<div class="info">
								<div class="result-box">
									<div class="left">
										<ul>
											<li>
												<div class="tit">
													ID
												</div>
												<div class="content">
													<p>000004</p>
												</div>
											</li>
											<li>
												<div class="tit">
													Name
												</div>
												<div class="content">
													<p>Food product</p>
												</div>
											</li>
											<li>
												<div class="tit">
													Client
												</div>
												<div class="content">
													<span >Godiva <i></i></span>
												</div>
											</li>
											<li>
												<div class="tit">
													Product Category
												</div>
												<div class="content">
													<p>Food</p>
												</div>
											</li>
											<li>
												<div class="tit">
													Background Style
												</div>
												<div class="content">
													<p>White</p>
												</div>
											</li>
											<li>
												<div class="tit">
													Product Category
												</div>
												<div class="content">
													<p>Food</p>
												</div>
											</li>
											<li>
												<div class="tit">
													Notes
												</div>
												<div class="content">
													<p>Test parameter for food products</p>
												</div>
											</li>
										</ul>
									</div>
									<div class="right">
										<ul>
											<li>
												<div class="tit">
													Photo Style
												</div>
												<div class="content">
													Knolling
												</div>
											</li>
											<li>
												<div class="tit">
													Lighting Style
												</div>
												<div class="content">
													Flat Lighting, Soft Shadow
												</div>
											</li>
											<li>
												<div class="tit">
													Scene Style
												</div>
												<div class="content">
													Contemporary, Minimalist
												</div>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
						<div class="edit-button">
							<button class="g-button-style" type="button">Edit</button>
						</div>
					</div>
					<div class="objects item">
						<div class="title g-title">
							<h3>Objects</h3>
						</div>
						<div class="category-t">
							Background x 1, Camera x 1, Lighting x 1, Product x 1, Props x 2
						</div>
						<div class="content">
							<div class="theader">
								<span></span>
								<span>category</span>
								<span>Object</span>
								<span>Measurement</span>
								<span>Other properties</span>
								<span>Notes</span>
								<span>Sample photos</span>
							</div>
							<div class="tbody">
								<ul>
									<li>
										<div class="pricture">
											<div class="img">
												<img src="images/img_04.png" alt="">
											</div>
										</div>
										<div class="category">
											<p>Background</p>
										</div>
										<div class="object">
											<p>Brick</p>
										</div>
										<div class="measurement">
											<p><span class="key">Size</span> <span class="val">W 8 x H 4 m</span></p>
										</div>
										<div class="properties">
											 
										</div>
										<div class="notes">
											<p>Center to product</p>
										</div>
										<div class="photos">
											<div class="img">
												<img src="./images/img_12.png" alt="">
											</div>
										</div>
									</li>
									<li>
										<div class="pricture">
											<div class="img">
												<img src="images/img_05.png" alt="">
											</div>
										</div>
										<div class="category">
											<p>Camera</p>
										</div>
										<div class="object">
											<p>Camera</p>
										</div>
										<div class="measurement">
											<p><span class="key">Height</span><span class="val">1 m</span></p>
										</div>
										<div class="properties">
											<p><span class="key">Lens</span><span class="val">20 mm f/2.8</span></p>
											<p><span class="key">ISO</span><span class="val">ISO-100</span></p>
											<p><span class="key">Aperature</span><span class="val">F4</span></p>
											<p><span class="key">Shutter</span><span class="val">1/90</span></p>
										</div>
										<div class="notes">
											
										</div>
										<div class="photos">
											<div class="img">
												 
											</div>
										</div>
									</li>
									<li>
										<div class="pricture">
											<div class="img">
												<img src="images/img_06.png" alt="">
											</div>
										</div>
										<div class="category">
											<p>Lighting</p>
										</div>
										<div class="object">
											<p>Strobe</p>
											<p>Red Gel</p>
										</div>
										<div class="measurement">
											<p><span class="key">Size</span><span class="val">W 8 x H 4 m</span></p>
										</div>
										<div class="properties">
											
										</div>
										<div class="notes">
											
										</div>
										<div class="photos">
											<div class="img">
												 
											</div>
										</div>
									</li>
									<li>
										<div class="pricture">
											<div class="img">
												<img src="images/img_07.png" alt="">
											</div>
										</div>
										<div class="category">
											<p>Product</p>
										</div>
										<div class="object">
											<p>Rectangle</p>
											<p>Product</p>
										</div>
										<div class="measurement">
											<p><span class="key">Size</span><span class="val">W 8 x H 4 m</span></p>
										</div>
										<div class="properties">
											 
										</div>
										<div class="notes">
											<p>Center to background</p>
										</div>
										<div class="photos">
											<div class="img">
												 
											</div>
										</div>
									</li>
									<li>
										<div class="pricture">
											<div class="img">
												<img src="images/img_08.png" alt="">
											</div>
										</div>
										<div class="category">
											<p>Props</p>
										</div>
										<div class="object">
											<p>Side table</p>
										</div>
										<div class="measurement">
											<p><span class="key">Size</span><span class="val">W 8 x H 4 m</span></p>
										</div>
										<div class="properties">
											 
										</div>
										<div class="notes">
											Dark glass top
										</div>
										<div class="photos">
											<div class="img">
												 <img src="images/img_10.png" >
											</div>
										</div>
									</li>
									<li>
										<div class="pricture">
											<div class="img">
												<img src="images/img_05.png" alt="">
											</div>
										</div>
										<div class="category">
											<p>Plant</p>
										</div>
										<div class="object">
											<p>Plant</p>
										</div>
										<div class="measurement">
											<p><span class="key">Size</span><span class="val">W 8 x H 4 m</span></p>
										</div>
										<div class="properties">
											
										</div>
										<div class="notes">
											Dark base
										</div>
										<div class="photos">
											<div class="img">
												 <img src="images/img_11.png" > 
											</div>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="history item">
						<div class="title g-title">
							<h3>History</h3>
						</div>
						<div class="content g-table">
							<div class="theader">
								<ul>
									<li>
										USER
									</li>
									<li>
										EMAIL
									</li>
									<li>
										<button class="modified-button" type="button">LAST MODIFIED</button>
									</li>
								</ul>
							</div>
							<div class="tbody">
								<ul>
									<li>
										<div class="name">
											<img src="images/name.png" alt="">
											<span>Chris Wu</span>
										</div>
										<div class="email">
											abc@email.com
										</div>
										<div class="last-modified">
											<p>Jan 03, 2020 at 05:29pm</p>
											<div class="btns">
												<button class="version-button" type="button">Restore this version</button>
											</div>
										</div>
									</li>
									<li>
										<div class="name">
											<img src="images/name.png" alt="">
											<span>Chris Wu</span>
										</div>
										<div class="email">
											abc@email.com
										</div>
										<div class="last-modified">
											<p>Jan 03, 2020 at 05:29pm</p>
											<div class="btns">
												<button class="version-button" type="button">Restore this version</button>
											</div>
										</div>
									</li>
									 <li>
									 	<div class="name">
									 		<img src="images/name.png" alt="">
									 		<span>Chris Wu</span>
									 	</div>
									 	<div class="email">
									 		abc@email.com
									 	</div>
									 	<div class="last-modified">
									 		<p>Jan 03, 2020 at 05:29pm</p>
									 		<div class="btns">
									 			<button class="version-button" type="button">Restore this version</button>
									 		</div>
									 	</div>
									 </li>
									<li>
									 	<div class="name">
									 		<img src="images/name.png" alt="">
									 		<span>Chris Wu</span>
									 	</div>
									 	<div class="email">
									 		abc@email.com
									 	</div>
									 	<div class="last-modified">
									 		<p>Jan 03, 2020 at 05:29pm</p>
									 		<div class="btns">
									 			<button class="version-button" type="button">Restore this version</button>
									 		</div>
									 	</div>
									</li>
									<li>
									 	<div class="name">
									 		<img src="images/name.png" alt="">
									 		<span>Chris Wu</span>
									 	</div>
									 	<div class="email">
									 		abc@email.com
									 	</div>
									 	<div class="last-modified">
									 		<p>Jan 03, 2020 at 05:29pm</p>
									 		<div class="btns">
									 			<button class="version-button" type="button">Restore this version</button>
									 		</div>
									 	</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 遮罩层 -->
		<div class="shade"></div>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/uploadimg.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/scrollBar.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bscroll.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/script.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$(".scrollBox").scrollBar(); 
			})
		</script>
	</body>
	
</html>




